/**
 * Created by Administrator on 2017/7/20.
 */
/**
 * Created by Administrator on 2017/6/29.
 */
var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin'); //自动将
var ROOT_PATH = path.resolve(__dirname); // 定义一些文件夹的路径
var APP_PATH = path.resolve(ROOT_PATH, 'app'); //定义源代码文件夹的路径，使用nodejs中的自带path路径功能
var BUILD_PATH = path.resolve(ROOT_PATH, 'build'); //定义build文件夹的路径，使用nodejs中自带的path 路径功能
const TEM_PATH = path.resolve(ROOT_PATH, 'templates'); //定义templates文件夹的绝对路径
module.exports={
  //项目的入口文件夹 可以直接用文件夹名称 默认会找文件夹下的index.js 也可以确定是哪个文件名字
  entry: {
    // 通常我们build出来的只有一个bundle.js 如果第三方库很多的话，会造成这个文件非常大，减慢加载速度，现在我们要把第三方库和我们app本身的代码分成两个文件。
    //应用不可能都是SPA，不可能只生成一个html文件，三个入口文件，app, mobile和 vendors，现在的需求是这样的，有两个页面，一个叫index.html 它需要引用vendors.js和app.js这两个文件，还有一个mobile.html页面他要引用vendors.js和mobile.js这两个文件。
    app: path.resolve(APP_PATH, 'index.js'),
    mobile: path.resolve(APP_PATH, 'mobile.js'),
    vendor: ['jquery', 'moment']  //添加要打包到vendors里面的库
  },
  //注意 我们修改了bundle.js 用一个数组[name]来代替，他会根据entry的入口文件名称生成多个js文件，这里就是(app.js,mobile.js和vendors.js)
  output:{
    filename: '[name].js',
    path: BUILD_PATH,
  },
  //使用HtmlwebpackPlugin插件，打包完成后会自动在打包路径下生成一个html文件并将bundle.js插入到html中
  plugins: [
    //创建了两个HtmlWebpackPlugin的实例，生成两个页面
    new HtmlwebpackPlugin({
      title: 'Hello World app',
      template: path.resolve(TEM_PATH, 'index.html'),
      filename: 'index.html',
      //chunks这个参数告诉插件要引用entry里面的哪几个入口
      chunks: ['app', 'vendors'],
      //要把script插入到标签里
      inject: 'body'
    }),
    new HtmlwebpackPlugin({
      title: 'Hello Mobile app',
      template: path.resolve(TEM_PATH, 'mobile.html'),
      filename: 'mobile.html',
      chunks: ['mobile', 'vendors'],
      inject: 'body'
    }),
    new webpack.optimize.UglifyJsPlugin({minimize:true}), //对打包后的js代码进行压缩处理
    //把入口文件里面的数组打包成vendors.js,当多个 bundle 共享一些相同的依赖，CommonsChunkPlugin 有助于提取这些依赖到共享的 bundle 中，来避免重复打包
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendors',
      filename: 'vendors.js',
    })
  ],
  module:{
    rules:[
      {
        test:/\.css$/,
        // css-loader会遍历css文件，找到所有的url(...)并且处理。style-loader会把所有的样式插入到你页面的一个style tag中,loaders的处理顺序是从右到左的，这里就是先运行css-loader然后是style-loader
        use:[
          'style-loader',
          'css-loader?sourceMap'
        ],
        include: APP_PATH  // APP_PATH路径下的.css文件使用style-loader和css-loader进行预处理
      },
      {
        test:/\.(png|jpg|gif|svg)/, //处理图片文件
        use:['file-loader']
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/, //处理字体文件
        use: [
          'file-loader'
        ]
      },
      {
        test:/\.js$/, //处理js文件
        use:['babel-loader'],
        include: APP_PATH,
      },
      {
        test:/\.scss$/, //处理sass文件
        use:[
          'style-loader',
          'css-loader?sourceMap',
          'sass-loader?sourceMap', // 为css添加sourceMap，定位出错的位置
        ]
      },
      {
        test:/\.html$/, //处理html文件
        use:['html-loader'],
      }
    ],
  },
}